import React, {lazy, Fragment, Suspense} from 'react';
import {changeTdk, goSystem, setScrollTop} from "../../assets/js/utils";
import hoc from './indexHoc';
import ScrollAnim from 'rc-scroll-anim';
import 'swiper/swiper-bundle.css';
import Css from '../../assets/css/union/index.css';
const Nav=lazy(()=>import('../../components/nav/index'));
const RNav=lazy(()=>import('../../components/rNav/index'));
const Foot=lazy(()=>import('../../components/foot/index'));
const ScrollParallax =  ScrollAnim.Parallax;

const UnionComponent=hoc((props)=>{
    return(
        <React.Fragment>
            <div className={Css['un_ban']+' swiper-container'} id='indSuccess'>
                <div className="swiper-wrapper">
                    {
                        props.aBan.length>0?
                            props.aBan.map((item,index)=>{
                                return(
                                    <div className="swiper-slide" key={index}>
                                        <div className={Css['un_ban_box']}>
                                            <ScrollParallax
                                                location='indSuccess'
                                                animation={{y:0, playScale: [0.9, 1.5]}}
                                                className={Css['un_ban_bg']}
                                                style={{backgroundImage:'url('+item.bg+')'}}
                                            ></ScrollParallax>
                                            <div className={Css['un_ban_cen']}>
                                                <div className={Css['un_ban_cen_img']}>
                                                    <img className="swiper-lazy" data-src={item.img} alt='' />
                                                    <div className={Css['activeLoading']}></div>
                                                </div>
                                                <div className={Css['un_ban_cen_btn_box']}>
                                                    {
                                                        item.btn.length>0?
                                                            item.btn.map((item2,index2)=>{
                                                                return(
                                                                    <div className={Css['un_ban_cen_btn']} id={'un_ban_cen_btn'+index} key={index2} onClick={props.goPages.bind(this,item2.url)}>{item2.name}</div>

                                                                )
                                                            })
                                                            :""
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                            :''
                    }
                </div>
                <div className={Css['swiper-pagination']+' swiper-pagination'}></div>
            </div>
            <div className={Css['un_multiple']}>
                <div className={Css['un_title']}><p>多元福利场景</p>提供全年7大法定节日、生日、劳保等标准慰问产品方案，同时支持定制其他福利场景</div>
                <div className={Css['un_multiple_par1']}>
                    <div className={Css['un_multiple_par1_title']}><p>职工慰问</p></div>
                    <div className={Css['un_multiple_par1_list']}>婚育祝贺 / 维权保障 / 帮困补助 / 精准扶贫 / 其他定制化场景</div>

                    <div className={Css['thumbs_container']+' swiper-container'} id="thumbs">
                        <div className={Css['swiper-wrapper']+' swiper-wrapper'}>
                            {
                                props.aPro.smallApro!==undefined?
                                    props.aPro.smallApro.map((item,index)=>{
                                        return(
                                            <div className={Css['swiper-slide']+' swiper-slide'} key={index} onMouseEnter={props.onMousover.bind(this,index)}>
                                                <div className={Css['un_multiple_par1_icn']}>
                                                    <i className={item.icn}></i>
                                                    <span>{item.title}</span>
                                                </div>
                                            </div>
                                        )
                                    })
                                    :''
                            }
                        </div>
                    </div>
                    <div className={Css['gallery_container']+' swiper-container'} id="gallery">
                        <div className="swiper-wrapper">
                            {
                                props.aPro.bigAPro!==undefined?
                                    props.aPro.bigAPro.map((item,index)=>{
                                        return(
                                            <div className="swiper-slide" key={index}>
                                                <div className={Css['un_multiple_par1_img']}>
                                                    <img data-src={item.img} className="swiper-lazy" alt={''} />
                                                    <div className={Css['activeLoading']}></div>
                                                </div>
                                            </div>
                                        )
                                    })
                                    :""
                            }
                        </div>
                    </div>
                    <div className={Css['gallery_swiper_pagination']+' gallery_swiper_pagination'}></div>
                    <div className={Css['un_multiple_par1_btn_box']}>
                        {
                            props.aPro.btn!==undefined?
                                props.aPro.btn.map((item,index)=>{
                                    return(
                                        <div className={Css['un_multiple_par1_btn']} id={'un_multiple_par1_btn'+index} key={index}>{item.name}</div>

                                    )
                                })
                                :''
                        }
                    </div>
                </div>
                <div className={Css['un_multiple_par2']}>
                    <div className={Css['un_multiple_par2_title']}>当季热销</div>
                    <div className={Css['nj_swiper_seed']+' swiper-container nj_swiper_seed'}>
                        <div className="swiper-wrapper">
                            {
                                props.aNeed.length>0?
                                    props.aNeed.map((item,index)=>{
                                        return(
                                            <div className="swiper-slide" key={index}>
                                                <div className={Css['nj_swiper_br']}>
                                                    <div className={Css['nj_swiper_img']}>
                                                        <img data-src={item.img} className="swiper-lazy" alt='' />
                                                    </div>
                                                    <div className={Css['activeLoading']}></div>
                                                    <div className={Css['nj_swiper_font']}><strong>{item.pp}</strong>{item.name}</div>
                                                </div>
                                            </div>
                                        )
                                    })
                                    :''
                            }
                        </div>
                        <div className={Css['nj_swiper_seed_pagination']+' nj_swiper_seed_pagination'}></div>
                    </div>
                </div>
                <div className={Css['un_multiple_par3']}>
                    <div className={Css['un_multiple_par4_title']}><p>职工服务与活动</p>根据《工会法》规定，基层工会经费主要用于为职工服务和开展工会活动</div>
                    <div className={Css['un_multiple_par3_ul']}>
                        <ul>
                            <li>
                                <div className={Css['un_multiple_par3_ul_icn']}><img src={require('../../assets/images/union/un11.png')} alt=''/></div>
                                <div className={Css['un_multiple_par3_ul_font']}>
                                    <div className={Css['un_multiple_par3_ul_font_title']}>职工教育</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>专题培训</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>技能培训</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>优秀职工评选</div>
                                </div>
                            </li>
                            <li>
                                <div className={Css['un_multiple_par3_ul_icn']}><img src={require('../../assets/images/union/un12.png')} alt=''/></div>
                                <div className={Css['un_multiple_par3_ul_font']}>
                                    <div className={Css['un_multiple_par3_ul_font_title']}>职工关怀</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>妈咪小屋</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>职工书屋</div>
                                    <div className={Css['un_multiple_par3_ul_font_List']}>职工心理援助（EAP）</div>
                                </div>
                            </li>
                            <li>
                                <div className={Css['un_multiple_par3_ul_icn']}><img src={require('../../assets/images/union/un13.png')} alt=''/></div>
                                <div className={Css['un_multiple_par3_ul_font']}>
                                    <div className={Css['un_multiple_par3_ul_font_title']}>文体活动</div>
                                    <div className={Css['un_multiple_par3_ul_font_box']}>
                                        <div className={Css['un_multiple_par3_ul_font_List']}><p>电影</p></div>
                                        <div className={Css['un_multiple_par3_ul_font_List']}>文艺演出</div>
                                        <div className={Css['un_multiple_par3_ul_font_List']}>体育比赛</div>
                                        <div className={Css['un_multiple_par3_ul_font_List']}>知识竞赛</div>
                                        <div className={Css['un_multiple_par3_ul_font_List']}>春秋游</div>
                                        <div className={Css['un_multiple_par3_ul_font_List']}>参观展览</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
            <div className={Css['un_multiple_par4']}>
                <div className={Css['un_multiple_par4_bg']}>
                    <div className={Css['un_multiple_par3_title']}><p>专业贴心服务</p>为您一站解决职工福利的采购、实施、管理和满意度难题</div>
                </div>
                <div className={Css['un_multiple_par4_cen']}>
                    <div className={Css['ben_paas_cen_swarp']}>
                        <div className={Css['ben_paas_cen_swarp_font']}>
                            {
                                props.aMul.left!==undefined?
                                    props.aMul.left.map((item,index)=>{
                                        let temProps='';
                                        if(index===0){
                                            temProps=props.bLouti0
                                        }else if(index===1){
                                            temProps=props.bLouti1
                                        }else if (index===2) {
                                            temProps=props.bLouti2
                                        }else  {
                                            temProps=props.bLouti3
                                        }
                                        return(
                                            <div className={temProps?Css['louti']+' '+Css['active']:Css['louti']}  id={'louti'+index} key={index}>
                                                <div className={Css['ben_paas_cen_swarp_font_title']}>{item.title}</div>
                                                <div className={Css['ben_paas_cen_swarp_font_des']+' '+Css['ben_paas_cen_swarp_font_des_ss']} dangerouslySetInnerHTML={{__html:item.list}}></div>
                                            </div>
                                        )
                                    })
                                    :""
                            }
                        </div>
                        <div className={Css['ben_paas_cen_swarp_img']}>
                            <ul>
                                {
                                    props.aMul.right!==undefined?
                                        props.aMul.right.map((item,index)=>{
                                            let temProps='';
                                            if(index===0){
                                                temProps=props.bLouti0
                                            }else if(index===1){
                                                temProps=props.bLouti1
                                            }else if (index===2) {
                                                temProps=props.bLouti2
                                            }else  {
                                                temProps=props.bLouti3
                                            }
                                            return(
                                                <li className={temProps?Css['active']:''} key={index}>
                                                    <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item.img} alt='' />
                                                </li>
                                            )
                                        })
                                        :""
                                }
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div className={Css['un_serv']}>
                <div className={Css['un_serv_cen']}>
                    <div className={Css['un_title']}><p>服务覆盖全行业客户</p></div>
                    <div className={Css['un_serv_data']}>
                        <ul>
                            {
                                props.aServ.number!==undefined?
                                    props.aServ.number.map((item,index)=>{
                                        return(
                                            <li key={index}>
                                                <div className={Css['un_serv_data_num']}>{item.nub}{item.sup?<sup>{item.sup}</sup>:''}{item.sup?<sub>{item.sub}</sub>:''}</div>
                                                <div className={Css['un_serv_data_list']}>{item.title}</div>
                                            </li>
                                        )
                                    })
                                    :''
                            }
                        </ul>
                    </div>
                    <div className={Css['un_serv_cen_logo']}>
                        <div className={Css['un_multiple_par2_title']}><p>优质供应资源</p></div>
                        <div className={props.bChevron?Css['ben_welfare_cen_logo']+' '+Css['active']:Css['ben_welfare_cen_logo']}>
                            {
                                props.aServ.logo!==undefined?
                                    props.aServ.logo.map((item,index)=>{
                                        return(
                                            <ul key={index}>
                                                <li>{item.title}</li>
                                                {
                                                    item.logo.length>0?
                                                        item.logo.map((item2,index2)=>{
                                                            return(
                                                                <li key={index2}>
                                                                    <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={item2.img} alt='' /></li>
                                                            )
                                                        })
                                                        :''
                                                }

                                            </ul>
                                        )
                                    })
                                    :''
                            }
                        </div>
                        <div className={props.bChevron?Css['container']+' '+Css['active']:Css['container']} onClick={props.onClickLogo.bind(this)}>
                            <div className={Css['chevron']}></div>
                            <div className={Css['chevron']}></div>
                            <div className={Css['chevron']}></div>
                        </div>
                    </div>
                </div>
            </div>
            <div className={Css['un_from']}>
                <div className={Css['un_from_cen']}>
                    <div className={Css['un_from_cen_title']}>企业免费试用申请</div>
                    <div className={Css['un_from_cen_from']} id="un_from_cen_from">
                        <img src="//www.guanaitong.com/images/2020/public/loading.gif" data-echo={require('../../assets/images/union/un20.png')} alt=''/>
                    </div>
                    <div className={Css['un_from_cen_pho']}>
                        <p>企业工会咨询<span>021-52715673</span></p>
                        <p>职工售后服务<span>400-888-5818</span></p>
                    </div>
                </div>
            </div>
        </React.Fragment>
    )
})
class union extends React.Component {
    constructor(){
        super();
        this.state={
            title:'工会职工福利_工会节日福利_职工慰问品-中智关爱通',
            description:'中智关爱通为企业工会提供职工福利解决方案，涵盖节日福利（中秋，新年，春节，端午等）、员工观影电影卡、生日蛋糕、高温劳防、扶贫、职工关怀等，帮助企业工会一站解决职工福利的采购、实施、管理和满意度难题。',
            keywords:'工会职工福利,工会节日福利,职工慰问品,工会扶贫,职工关怀',
            aBan:[],
            aPro:{},
            aNeed:[],
            aMul:{},
            aServ:{},
        }
    }
    componentDidMount(){
        this.goSystem();
        setTimeout(()=>{
            this.getABanData();
            this.getAProData();
            this.getANeedData();
            this.getAMulData();
            this.getAServData();
        },100)
        changeTdk(this.state.title,this.state.description,this.state.keywords);
        setScrollTop(window.base.pages.index.iScrollTop);
    }
    //获取banner数据
    getABanData(){
        let temAban=[
            {
                img:require('../../assets/images/union/un22.png'),
                bg:require('../../assets/images/union/un1.jpg'),
                btn:[
                    {
                        name:'立即咨询',
                        url:'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT68984589&lng=cn',
                    },
                    {
                        name:'申请试用',
                        url:'//guanaitong.jinshuju.com/f/A4bzAf',
                    }
                ]
            },
            {
                img:require('../../assets/images/union/un23.png'),
                bg:require('../../assets/images/union/un19.jpg'),
                btn:[
                    {
                        name:'立即咨询',
                        url:'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT68984589&lng=cn',
                    },
                    {
                        name:'申请试用',
                        url:'//guanaitong.jinshuju.com/f/A4bzAf',
                    }
                ]
            },
            {
                img:require('../../assets/images/union/un24.png'),
                bg:require('../../assets/images/union/un20.jpg'),
                btn:[
                    {
                        name:'立即咨询',
                        url:'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT68984589&lng=cn',
                    },
                    {
                        name:'申请试用',
                        url:'//guanaitong.jinshuju.com/f/A4bzAf',
                    }
                ]
            },
            {
                img:require('../../assets/images/union/un25.png'),
                bg:require('../../assets/images/union/un21.jpg'),
                btn:[
                    {
                        name:'立即咨询',
                        url:'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT68984589&lng=cn',
                    },
                    {
                        name:'申请试用',
                        url:'//guanaitong.jinshuju.com/f/A4bzAf',
                    }
                ]
            }

        ];
        this.setState({aBan:temAban})
    }
    //获取产品数据
    getAProData(){
        let temAPro={
            smallApro:[
                {
                    icn:'e64e',
                    title:'生日福利'
                },
                {
                    icn:'e612',
                    title:'元 旦'
                },
                {
                    icn:'e613',
                    title:'春 节'
                },
                {
                    icn:'e605',
                    title:'清明节'
                },
                {
                    icn:'e6ab',
                    title:'劳动节'
                },
                {
                    icn:'e743',
                    title:'端午节'
                },
                {
                    icn:'e6d0',
                    title:'中秋节'
                },
                {
                    icn:'e6b2',
                    title:'国庆节'
                },
                {
                    icn:'ed49',
                    title:'夏日'
                }
            ],
            bigAPro:[
                {
                    img:require('../../assets/images/union/un2.jpg')
                },
                {
                    img:require('../../assets/images/union/un3.jpg')
                },
                {
                    img:require('../../assets/images/union/un4.jpg')
                },
                {
                    img:require('../../assets/images/union/un5.jpg')
                },
                {
                    img:require('../../assets/images/union/un6.jpg')
                },
                {
                    img:require('../../assets/images/union/un7.jpg')
                },
                {
                    img:require('../../assets/images/union/un8.jpg')
                },
                {
                    img:require('../../assets/images/union/un9.jpg')
                },
                {
                    img:require('../../assets/images/union/un10.jpg')
                }
            ],
            btn:[
                {
                    name:'立即咨询',
                    url:'//kht.zoosnet.net/LR/Chatpre.aspx?id=KHT68984589&lng=cn'
                },
                {
                    name:'申请试用',
                    url:'//guanaitong.jinshuju.com/f/A4bzAf'
                }
            ]
        };
        this.setState({aPro:temAPro})
    }
    //获取热卖产品
    getANeedData(){
        let temANeed=[
            {
                img:require('../../assets/images/union/un11.jpg'),
                pp:'沈大成',
                name:'青团组合'
            },
            {
                img:require('../../assets/images/union/un12.jpg'),
                pp:'新雅',
                name:'青团组合'
            },
            {
                img:require('../../assets/images/union/un13.jpg'),
                pp:'福临门',
                name:'粮油组合'
            },
            {
                img:require('../../assets/images/union/un14.jpg'),
                pp:'欧丽薇兰',
                name:'特级初榨橄榄油'
            },
            {
                img:require('../../assets/images/union/un15.jpg'),
                pp:'蕉下',
                name:'AIR三折小黑伞'
            },
            {
                img:require('../../assets/images/union/un16.jpg'),
                pp:'光明',
                name:'莫斯利安酸奶'
            }
        ];
        this.setState({aNeed:temANeed})
    }
    //获取贴心服务
    getAMulData(){
        let temAMul={
            left:[
                {
                    title:'定制服务',
                    list:'<strong>卡券定制</strong><br/>专业设计团队创意卡券定制服务<br/><br/><strong>商品定制</strong><br/>支持调整套餐商品，<br/>根据需求定向拓展供应商资源<br/><br/><strong>礼盒定制</strong><br/>定制特色节日礼盒，独家福利与众不同<br/><br/><strong>平台定制</strong><br/>定制专属福利平台，彰显企业文化'
                },
                {
                    title:'售后无忧',
                    list:'秉承“首问责任制”<br/>与“率先赔付机制”<br/><br/>400热线7*10小时安心售后<br/><br/>销售顾问/企业客服/<br/>培训师多对一专享服务<br/><br/>亿级数据处理能力，<br/>服务网络覆盖全国'
                },
                {
                    title:'便捷采购',
                    list:'支持线上签约，线上开票<br/>最快3分钟完成采购全流程'
                },
                {
                    title:'安心物流',
                    list:'自建仓库<br/>商品一件起送，全国包邮<br/>（除港澳台）'
                }
            ],
            right:[
                {
                    img:require('../../assets/images/union/un16.png')
                },
                {
                    img:require('../../assets/images/union/un17.png')
                },
                {
                    img:require('../../assets/images/union/un18.png')
                },
                {
                    img:require('../../assets/images/union/un19.png')
                }
            ]
        };
        this.setState({aMul:temAMul})
    }
    // 获取服务优势
    getAServData(){
        let temAServ={
            number:[
                {
                    nub:'13',
                    sub:'年',
                    title:'深耕企业福利'
                },
                {
                    nub:'18000',
                    sup:'+',
                    sub:'家',
                    title:'服务企业'
                },
                {
                    nub:'900',
                    sup:'+',
                    sub:'万',
                    title:'覆盖员工'
                },
                {
                    nub:'99.91%',
                    title:'员工满意度'
                }
            ],
            logo:[
                {
                    title:'月饼粽子',
                    logo:[
                        {img:require('../../assets/images/union/logo1.png')},
                        {img:require('../../assets/images/union/logo2.png')},
                        {img:require('../../assets/images/union/logo3.png')},
                        {img:require('../../assets/images/union/logo4.png')},
                        {img:require('../../assets/images/union/logo5.png')},
                        {img:require('../../assets/images/union/logo6.png')},
                    ]
                },
                {
                    title:'零食水果',
                    logo:[
                        {img:require('../../assets/images/union/logo7.png')},
                        {img:require('../../assets/images/union/logo8.png')},
                        {img:require('../../assets/images/union/logo9.png')},
                        {img:require('../../assets/images/union/logo10.png')},
                        {img:require('../../assets/images/union/logo11.png')},
                        {img:require('../../assets/images/union/logo12.png')},
                    ]
                },
                {
                    title:'粮油干货',
                    logo:[
                        {img:require('../../assets/images/union/logo13.png')},
                        {img:require('../../assets/images/union/logo14.png')},
                        {img:require('../../assets/images/union/logo15.png')},
                        {img:require('../../assets/images/union/logo16.png')},
                        {img:require('../../assets/images/union/logo17.png')},
                        {img:require('../../assets/images/union/logo18.png')},
                    ]
                },
                {
                    title:'乳品水饮',
                    logo:[
                        {img:require('../../assets/images/union/logo19.png')},
                        {img:require('../../assets/images/union/logo20.png')},
                        {img:require('../../assets/images/union/logo21.png')},
                        {img:require('../../assets/images/union/logo22.png')},
                        {img:require('../../assets/images/union/logo23.png')},
                        {img:require('../../assets/images/union/logo24.png')},
                    ]
                },
                {
                    title:'实用家电',
                    logo:[
                        {img:require('../../assets/images/union/logo25.png')},
                        {img:require('../../assets/images/union/logo26.png')},
                        {img:require('../../assets/images/union/logo27.png')},
                        {img:require('../../assets/images/union/logo28.png')},
                        {img:require('../../assets/images/union/logo29.png')},
                        {img:require('../../assets/images/union/logo30.png')},
                    ]
                },
                {
                    title:'家纺布艺',
                    logo:[
                        {img:require('../../assets/images/union/logo31.png')},
                        {img:require('../../assets/images/union/logo32.png')},
                        {img:require('../../assets/images/union/logo33.png')},
                        {img:require('../../assets/images/union/logo34.png')},
                        {img:require('../../assets/images/union/logo35.png')},
                        {img:require('../../assets/images/union/logo36.png')},
                    ]
                }
            ]
        };
        this.setState({aServ:temAServ})
    }
    //跳转平台
    goSystem(){
        goSystem(this.props,'union')
    }
    //页面离开时调用，页面离开时去除滚动事件解决页面切换时内存泄漏，
    componentWillUnmount(){
        window.removeEventListener('scroll',setScrollTop());
        this.setState=(state,callback)=>{
            return;
        }
    }
    render(){
        let newProps={
            aBan:this.state.aBan,
            aPro:this.state.aPro,
            aNeed:this.state.aNeed,
            aMul:this.state.aMul,
            aServ:this.state.aServ
        }
        return(
            <Fragment>
                <Suspense　fallback={<div className={'loadWidth'}></div>} >
                    {/*导航*/}
                    <Nav props={this.props}></Nav>
                    {/*导航*/}
                    {/*右导航*/}
                    <RNav props={this.props}></RNav>
                    {/*右导航*/}
                </Suspense >
                <UnionComponent {...this.props} {...newProps}></UnionComponent>
                <Suspense　fallback={<React.Fragment/>} >
                    {/*foot*/}
                    <Foot  props={this.props}></Foot>
                    {/*foot*/}
                </Suspense>
            </Fragment>
        )
    }
}
export default union